<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flatland</title>

    <link rel="stylesheet" href="05.css" type="text/css" />

    <script src="js/jquery.js"></script>
    <script>
		$(document).ready(function(e) {
            //attr() 添加设置属性
			//removeAttr() 删除属性
			//需求1，将类chapter的div下的所有超链接表明是站外链接，不被搜索引擎抓取
			//给链接添加了rel属性
			//$("div.chapter a").attr({rel:"external"});


			//需求2，再给链接添加title属性
			/*$("div.chapter a").attr({
				rel:"external",
				title: "Learn more at Wikipedia"
			});*/

			//需求3，再给链接添加id "wikilink序号"
			/*$("div.chapter a").attr({
				rel:"external",
				title:"Learn more at Wikipedia",
				id: function(index,oldValue){
				    //console.log(index)
					return "wikilink-" + index;
				}
			})
			$("div.chapter a").click(function(e) {
                e.preventDefault();
                console.log($(this).attr("id"))
            });*/

			//需求4，只给链接地址中包含 wikipedia 的链接添加以上属性
			/*$("div.chapter a[href*='wikipedia']").attr({
				rel:"external",
				title:"Learn more at Wikipedia",
				id:function(index,oldValue){
					return "wikilink-" + index;
				}
			});*/

			//需求5， 在title信息中 包含链接的文本
			$("div.chapter a[href*='wikipedia']").attr({
				rel:"external",
				title:function(){
					return "Learn more about "+ $(this).text() + " at Wikipedia.";
				},
				id:function(index,oldValue){
					return "wikilink-" + index;
				}
			});

			// 通过 prop() 来获取、设置属性值。
			// val() 获取、设置表单元素值
			// val(["a","b"]) 设置多个值


			//需求6，创建一个锚记对象 //创建了，但未在页面使用
			/*$("<a href='#top'>back to top</a>");
			$("<a id='top'></a>");*/


			//需求7，将链接插入在 类chapter的div中每个段落标记的外面之后
			//$("<a href='#top'>back to top</a>").insertAfter("div.chapter p");
			//$("<a id='top'></a>");
			//insertBefore() 插入到标签外部之前


			//需求8 将锚记插入到 body起始标记之后
			/*$("<a href='#top'>back to top</a>").insertAfter("div.chapter p");
			$("body").prepend($("<a id='top'></a>"));*/
			//console.log($("body").html())


			//内容.insertBefore(目标) 外部 之前
			//内容.insertAfter(目标) 外部 之后

			//目标.prepend(内容) 内部 之前
			//目标.append(内容) 内部 之后

			//内容.prependTo(目标) 内部 之前
			//内容.appendTo(目标) 内部 之后

			//需求9 将类 footnote的span (3个)移动到 id footer的div前面
			//$("span.footnote").insertBefore("#footer");


			//需求10 将上面3个span 加到<ol>中，再给每个span 加到<li>中
			/*$("span.footnote")
				.insertBefore("#footer")
				.wrapAll("<ol id='notes'></ol>")
				.wrap("<li><li>");*/



			//需求11 和上面一样，采用显示的循环方式 each()
				//在footer 外部前面插入 ol 返回ol对象
			/*var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");
			//循环页面上 3个 span
			$("span.footnote").each(function(index, element) {
                //将每个span 插入到ol内部 后面 再加上<li>
				$(this).appendTo($notes).wrap("<li></li>");
            });*/


			//需求12 为span原有的位置加入脚注编号
			/*var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");
			$("span.footnote").each(function(index, element) {
                $("<sup>"+(index + 1)+"</sup>").insertBefore($(this));
				$(this).appendTo($notes).wrap("<li></li>");
            });*/


			//需求13 使用反向插入方法before() 代替 insertBefore()
			/*var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");
			$("span.footnote").each(function(index, element) {
				//此处变成了 目标.before(内容)
                $(this).before("<sup>"+ (index+1) +"</sup>")
				.appendTo($notes)
				.wrap("<li></li>");
            });*/


			//需求14 使用 join() 解决字符串追加（"<sup>"+ (index+1) +"</sup>"）复杂问题
			/*var $notes = $("<ol id='notes'></ol>")
				.insertBefore("#footer");
			$("span.footnote").each(function(index, element) {
                $(this).before([
					"<sup>",
					index+1,
					"</sup>"
					].join(""))
					.appendTo($notes)
					.wrap("<li></li>");
            });*/



			//需求15 每个脚注加一个链接 指向底部唯一id值
			/*var $notes = $('<ol id="notes"></ol>')
				.insertBefore('#footer');
			$('span.footnote').each(function(index, element) {
			    //<a href="#footnote-x" id="context-x" class="context">
                    //<sup>x</sup> </a>
                $(this).before([
						'<a href="#footnote-',
						index+1,
						'" id="context-',
						index+1,
						'" class="context">',
						'<sup>',
						index+1,
						'</sup></a>'
					].join(''))
					.appendTo($notes)
					.wrap([
						'<li id="footnote-',
						index+1,
						'"></li>'
					].join(''));
            });*/



			//需求16 脚注链接 添加返回功能
			var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
			$('span.footnote').each(function(index, element) {
                $(this).before([
					'<a href="#footnote-',
					index + 1,
					'" id="context-',
					index+1,
					'" class="context">',
					'<sup>',
					index+1,
					'</sup></a>'
				].join(''))
				.appendTo($notes)
				.append([
					'&nbsp;(<a href="#context-',
					index+1,
					'">context</a>)'
				].join(''))
				.wrap([
					'<li id="footnote-',
					index+1,
					'"></li>'
				].join(''));
            });


			//clone() 复制元素
			//如  $('div.chapter p:eq(0)').clone();
			//默认情况 不会复制元素和其后带的事件，除非采用 clone(true)

			//需求17 将类pull-quote的span的父元素p设置为相对定位
			/*$('span.pull-quote').each(function(index, element) {
                var $p = $(this).parent('p');
				$p.css('position','relative');
            });*/


			//需求18 将类pull-quote的span复制 插入到父级p的内部 前面，使用类pulled
			/*$('span.pull-quote').each(function(index, element) {
                var $p = $(this).parent('p');
				$p.css('position','relative');
				var $cloneSpan = $(this).clone();
				$cloneSpan.addClass('pulled').prependTo($p);
            });*/

			//需求19 基于18 将复制的span中类drop替换为省略号
			/*$('span.pull-quote').each(function(index, element) {
                var $p = $(this).parent('p');
				$p.css('position','relative');
				$cloneSpan = $(this).clone();
				//end() 返回的是 $cloneSpan
				$cloneSpan.addClass('pulled').find('span.drop')
					.html('&hellip;').end().prependTo($p);
            });*/

			//获取 设置对象的html代码
			//$('h1').html('<i>hello zyw</i>')

			//需求20 基于19 忽略掉复制元素中的其他标记，只显示纯文本
			$('span.pull-quote').each(function(index, element) {
                var $p = $(this).parent('p');
				$p.css('position','relative');
				var $s = $(this).clone();
				$s.addClass('pulled')
					.find('span.drop')
					.html('&hellip;')
					.end()
					.text($s.text())	//获取文本时没有任何标记
					.prependTo($p);
            });


			/*
			插入内容：

				目标.append(内容)		内部，后面

				内容.appendTo(目标)	内部，后面

				目标.prepend(内容)	内部，前面

				内容.prependTo(目标)	内部，前面

				-----------------------------------
				目标.after(内容)			外部，后面

				内容.insertAfter(目标)	外部，后面

				目标.before(内容)			外部，前面

				内容.insertBefore(目标)	外部，前面

				----------------------------------------
				集合.wrap(对象)			每个元素外部 使用该对象

				集合.wrapAll(对象)		所有元素外部 使用该对象

				集合.wrapInner(对象)		在每个元素的"内容上" 使用该对象
				----------------------------------------------
				html()					替换、获取html代码

				text()					设置、获取 标记文本

				内容.replaceAll(目标)		替换

				目标.replaceWith(内容)	替换
				---------------------------------------------

				对象.empty()				移除对象的内容，包括子节点

				对象.remove()			移除对象，但不会在jQuery对象中删除，可恢复，
										但不保留jquery数据，如事件，绑定数据会丢失。

				对象.detach()			移除对象，不同于remove(),保留JQuery数据
			*/
        });

	</script>
  </head>
  <body>
    <div id="container">
      <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
      <div id="f-author">by Edwin A. Abbott</div>
      <h2>Part 1, Section 3</h2>
      <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
      <div id="excerpt">an excerpt</div>

      <div class="chapter">
        <p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>.</p>

        <p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a <a href="http://en.wikipedia.org/wiki/Circle">circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p>

        <p><span class="pull-quote">It is a Law of Nature <span class="drop">with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.</p>

        <p>But this rule applies not always to the Tradesman, and still less often to the Soldiers, and to the Workmen; who indeed can hardly be said to deserve the name of human Figures, since they have not all their sides equal. With them therefore the Law of Nature does not hold; and the son of an Isosceles (i.e. a Triangle with two sides equal) remains Isosceles still. Nevertheless, all hope is not such out, even from the Isosceles, that his posterity may ultimately rise above his degraded condition.&hellip;</p>

        <p>Rarely&mdash;in proportion to the vast numbers of Isosceles births&mdash;is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. <span class="footnote">"What need of a certificate?" a Spaceland critic may ask: "Is not the procreation of a Square Son a certificate from Nature herself, proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the Irregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses to the Triangular.</span> Such a birth requires, as its antecedents, not only a series of carefully arranged intermarriages, but also a long-continued exercise of frugality and self-control on the part of the would-be ancestors of the coming Equilateral, and a patient, systematic, and continuous development of the Isosceles intellect through many generations.</p>

        <p><span class="pull-quote">The birth  of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country <span class="drop">for many furlongs round</span>.</span> After a strict examination conducted by the Sanitary and Social Board, the infant, if certified as Regular, is with solemn ceremonial admitted into the class of Equilaterals. He is then immediately taken from his proud yet sorrowing parents and adopted by some childless Equilateral. <span class="footnote">The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon his relations again, for fear lest the freshly developed organism may, by force of unconscious imitation, fall back again into his hereditary level.</span></p>

        <p>How admirable is the Law of Compensation! <span class="footnote">And how perfect a proof of the natural fitness and, I may almost say, the divine origin of the aristocratic constitution of the States of Flatland!</span> By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle, taking advantage of the irrepressible and boundless hopefulness of the human mind.&hellip;</p>

        <p>Then the wretched rabble of the Isosceles, planless and leaderless, are ether transfixed without resistance by the small body of their brethren whom the Chief Circle keeps in pay for emergencies of this kind; or else more often, by means of jealousies and suspicious skillfully fomented among them by the Circular party, they are stirred to mutual warfare, and perish by one another's angles. No less than one hundred and twenty rebellions are recorded in our annals, besides minor outbreaks numbered at two hundred and thirty-five; and they have all ended thus.</p>
      </div>
      <div id="footer">
        <p>Read the <a href="http://web.archive.org/web/20050208012252/http://www.ibiblio.org/eldritch/eaa/FL.HTM">complete text of <i>Flatland</i></a>.</p>
      </div>
    </div>
  </body>
</html>
